// 目录互动功能逻辑
import useDraggble from '@/hooks/draggble'
import { ref, Ref, onMounted, reactive, computed } from 'vue'
export default function(draggbleDom: Ref<any>){
  const menuShow = ref(true)
  const isDraw = ref(false) // 是否正在进行拉伸
  const menuWidth = reactive({
    minWidth: 50, // 菜单失去光标时宽度
    isHover: true, // 光标是否在菜单上
  })
  const initWidth = ref(300) // 菜单光标悬浮时宽度

  const menusWidth = computed(() =>{
    if(menuWidth.isHover) return initWidth.value
    return menuWidth.minWidth
  }) // 菜单实时宽度

  onMounted(() => {
    useDraggble({
      el: draggbleDom.value,
      drawType: ['right'],
      onDrawStart:() => {
        isDraw.value = true
      },
      onDrawEnd: () => {
        isDraw.value = false
        menuWidth.isHover = false
      }
    },initWidth)
  })
  return {
    menuShow,
    isDraw,
    menuWidth,
    menusWidth
  }
}